<template>
  <el-main style="height: 90vh">
    <h1 style="text-align: center; margin: 0 auto">联系我们</h1>
    <el-row><p style="margin: 0 auto">Contact&nbsp;&nbsp;us</p></el-row>
    <div
      style="
        height: 3px;
        width: 100px;
        text-align: center;
        background-color: rgb(226, 159, 43);
        margin: 0 auto;
        padding: auto;
      "
    ></div>
    <el-divider direction="horizontal" style="margin-bottom: 80px" />
    <el-row
      class="row-bg"
      justify="space-between"
      style="background-color: transparent"
    >
      <el-col
        :span="10"
        :offset="1"
        style="box-shadow: -5px -5px 5px 8px #dab3b335"
      >
      <el-row>
        <el-image
          alt=""
          :src="itemthree"
          style="height: 60vh; width: 750px"
        ></el-image>
        </el-row>
      </el-col>
      <el-col :span="1" style="height: 60vh"
        ><div class="grid">
          <div class="grid">
            <div style="height: 400px">
              <el-steps
                direction="vertical"
                :active="1"
                style="margin: 0 auto; padding-top: 100px; margin-left: 10px"
              >
                <el-step title="加盟合作" />
                <el-step title="商务合作" />
              </el-steps>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="11" style="height: 60vh"
        ><div class="grid">
          <el-row>
            <el-col :span="12">
              <el-row
                ><el-image
                  style="height: 270px; width: 100%; margin-bottom: 10px"
                  alt=""
                  :src="itemone"
                ></el-image
              ></el-row>
              <el-row
                ><el-image
                  style="height: 270px; width: 100%; margin-top: 15px"
                  alt=""
                  :src="itemones"
                ></el-image
              ></el-row>
            </el-col>
            <el-col :span="12">
              <el-row style="height: 270px; width: 100%; margin-bottom: 10px">
                <ul
                  style="
                    line-height: 30px;
                    margin-top: 10px;
                    padding-left: 20px;
                    padding-top: 60px;
                    list-style-type: none;
                  "
                  v-for="(items, index) in List"
                  :key="index"
                >
                  <li>
                    <el-icon><Avatar /></el-icon>联系人:{{ items.name }}
                  </li>
                  <li>
                    <el-icon><Service /></el-icon>联系电话：{{ items.phone }}
                  </li>
                  <li>
                    <el-icon><Message /></el-icon>电子邮件：{{ items.mail }}
                  </li>
                  <li>
                    <el-icon><Cellphone /></el-icon>地址：{{ items.address }}
                  </li>
                </ul>
              </el-row>
              <el-row style="height: 270px; width: 100%; margin-top: 15px">
                <ul
                  style="
                    line-height: 30px;
                    margin-top: 10px;
                    padding-left: 20px;
                    padding-top: 60px;
                    list-style-type: none;
                  "
                  v-for="(item, index) in List"
                  :key="index"
                >
                  <li>
                    <el-icon><Avatar /></el-icon>联系人:{{ item.name }}
                  </li>
                  <li>
                    <el-icon><Service /></el-icon>联系电话：{{ item.phone }}
                  </li>
                  <li>
                    <el-icon><Message /></el-icon>电子邮件：{{ item.mail }}
                  </li>
                  <li>
                    <el-icon><Cellphone /></el-icon>地址：{{ item.address }}
                  </li>
                </ul>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>
<script>
import axios from 'axios';
import { imageEmits } from 'element-plus';
export default {
  name: "userabout",
  data() {
    return {
      itemthree: [require("@/assets/lianxi.jpg")],
      itemone: [require("@/assets/lianxi01.jpg")],
      itemones: [require("@/assets/lianxi02.jpg")],
      List:[
        
      ],
    };
  },
  methods:{
    getTabelInfo() {
  //     // let _that = this;
      axios
        .post("http://localhost:8081/contact/list", {
        })
        .then((response) => {
          this.List = response.data;
          console.log(response.data); //请求正确时执行的代码
  //         //     console.log(_that.tableData)//先打印一下空数组
  //         //     _that.tableData=response.data//将后台传递的数组赋值给定义的空数组
  //         //     console.log(_that.tableData)//检查一下数组内是否有数据
  //         // }).catch(function(response){
  //         //     console.log(response);//发生错误时执行的代码
  //       });
    // },
  })
  
  },

  } ,
mounted() {
    this.getTabelInfo();
  }}
</script>
<style >
.grid {
  border-radius: 4px;
  min-height: 36px;
  margin: 0 auto;
}
li{
  color: rgb(184 143 100);
}
</style>